import IntroduceRow from '@/pages/dashboard/components/IntroduceRow';
import PageHeaderContent from '@/pages/dashboard/components/PageHeaderContent';
import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import {Avatar, Card, Col, List, message, Row, Spin} from 'antd';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import React, {Suspense, useEffect, useState} from 'react';
import useStyles from './style.style';
import {listAnnouncementVoByPageUsingPost} from "@/services/backend/announcementController";
import avatar from '@/assets/imgs/avatar.jpg'
dayjs.extend(relativeTime);


const PageLoading = () => {
  return (
    <div style={{ paddingTop: 100, textAlign: 'center' }}>
      <Spin size="large" />
    </div>
  );
};

const Home: React.FC = () => {
  const { styles } = useStyles();
  const { initialState } = useModel('@@initialState');
  const currentUser = initialState?.currentUser ?? {};
  // const { data } = useRequest(() => {
  //   return listNoticeVoByPageUsingPost({});
  // });
  //
  // const notices = data?.records || [];
  const [notices,setNotices] = useState<API.AnnouncementVO[]>()


  const loadNoticeData = async () => {
    try {
      const {data,code} = await listAnnouncementVoByPageUsingPost({
        sortField: 'create_time',
        sortOrder: 'descend'
      })
      if (code === 0 && data?.records){
        setNotices(data.records)
      }
    }catch (e:any){
      message.error(e.message)
    }
  }

  useEffect(() => {
    loadNoticeData()
  }, []);


  const renderActivities = (item: API.AnnouncementVO) => {
    return (
      <List.Item key={item.id}>
        <List.Item.Meta
          avatar={<Avatar src={avatar} />}
          title={<span className={styles.username}>{item.title}</span>}
          description={
            <div>
              <span className={styles.content}>{item.content}</span>
              <span className={styles.datetime} title={item.createTime}>
                {dayjs(item.createTime).fromNow()}
              </span>
            </div>
          }
        />
      </List.Item>
    );
  };

  return (
    <PageContainer content={<PageHeaderContent currentUser={currentUser} />}>
      <Suspense fallback={<PageLoading />}>
        <IntroduceRow />
      </Suspense>
      <Row gutter={24}>
        <Col xl={24} lg={24} md={24} sm={24} xs={24}>
          <Card
            bodyStyle={{
              padding: 0,
            }}
            bordered={false}
            className={styles.activeCard}
            title="系统公告"
          >
            <List<API.AnnouncementVO>
              renderItem={(item) => renderActivities(item)}
              dataSource={notices}
              className={styles.activitiesList}
              size="large"
            />
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Home;
